<!DOCTYPE html>
<!-- Reader -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <link rel="stylesheet" href="css/reader_changeinfo.css">
</head>
<body>
<div class="main clearfix">
    <header class="header clearfix">
        <i class="iconfont icon-yun"></i>
        <i>Library</i>
        <i class="iconfont icon-yonghu"></i>
        <i class="name" th:text="${user.rname}"></i>
        <!--<a href="javascript:" class="readerhome" onclick="readerhomeclick()">Reader Home</a>-->
        <a href="/readerlogin" class="logout">Logout</a>
        <ul class="topmenu clearfix">
            <li><span id="home" onclick="home()" style="color: #fff;cursor: pointer">Home</span></li>
            <li><a id="readerhome" onclick="readerhomeclick()" style="cursor: pointer">Reader Home</a></li>
            <li><span id="reader" onclick="reader()" style="color: #fff;cursor: pointer">Fine</span></li>
            <li><span id="borrow" onclick="readerhome()" style="color: #fff;cursor: pointer">Borrow</span></li>
        </ul>
    </header>
    <div class="content" >
        <div class="photo" >
            <i class="iconfont icon-yonghu"></i>
        </div>
        <div >
            <div class="info" >
                <div class="phone" >
                    name
                    <input type="text" id="n" name="name" th:field="*{user.rname}" readonly="readonly">
                </div>
                <div class="password" >
                    password
                    <input type="text" id="p" name="password" th:field="*{user.password}" readonly="readonly">
                </div>
            </div>
            <div class="btn" >
                <button class="edit" onclick="edit()">Edit</button>
                <button onclick="submit()" class="save">Save</button>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="mandarin">
        <img src="images/mandarin.png" alt="">
    </div>
    <p>Shan ICP number18018134 | Powered by 1713011</p>
</footer>
</div>
<script type="text/javascript">
     //正则表达式
     function getQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var oriinfo={
        name:$("input[name=rname]").val(),
        password:$("input[name=password]").val()
    }
    $(function (){

    })
    var phone = getQueryString("phone");
    function submit() {
        var name=$("input[name=rname]").val()   <!--从输入框获取名字-->
        var password=$("input[name=password]").val()<!--从输入框获取密码-->
        if(name==oriinfo.name&&oriinfo.password==password){
            alert("请修改信息")       <!--并没有修改信息-->
            return
        }
        $.post("/modifyuserinfo",{
            oname:oriinfo.name,
            opassword:oriinfo.password,
            name:name,
            password:password
        },function (result) {
            if(result.success){
                window.location.href="/welcome?name="+name+"&phone="+phone
            }else{
                alert(result.msg)
            }
        })
    }
        function edit() {
        document.getElementById("n").removeAttribute("readonly")
        document.getElementById("p").removeAttribute("readonly")
    }
     function home(){
         var name=oriinfo.name
         window.location.href = "/reader_searchbook(in)?name="+name + "&phone=" + phone
     }
    function readerhomeclick() {
        var name=oriinfo.name
        window.location.href="/welcome?name="+name + "&phone=" + phone
    }
     function readerhome(){
         var name=oriinfo.name
         window.location.href = "/readerborrowinfo?name="+name + "&phone=" + phone
     }
     function reader(){
         var name=oriinfo.name
         window.location.href = "/readerfinerecord?name="+name + "&phone=" + phone
     }
</script>
</body>
</html>